

import React,{ useState,Suspense,lazy } from 'react'
import { Routes, Route ,Link,useRoutes,useNavigate} from "react-router-dom";
import {Divider,Spin,Button} from 'antd'

// 懒加载
const Foo = React.lazy(() => import('@/views/testrouter/Foo.jsx'));
const FooA = React.lazy(() => import('@/views/testrouter/FooA.jsx'));
const FooB = React.lazy(() => import('@/views/testrouter/FooB.jsx'));
const ErrorPage = React.lazy(() => import('@/views/ErrorPage.jsx'));
const Bar = React.lazy(() => import('@/views/testrouter/Bar.jsx'));
const TestRouter = React.lazy(() => import('@/views/testrouter/TestRouter.jsx'));

// const Generator = React.lazy(() => import('@/views/generator/Generator.jsx'));


import Generator from '@/views/generator/Generator.jsx'


function App() {

  const routes = useRoutes([
    
    {
      path: "/",
      element: <Generator />
    },
    // {
    //   path: "/testRouter",
    //   element: <TestRouter />,
    //   children:[
    //       {
    //           path: "foo",
    //           element: <Foo />,
    //           children: [
    //             { path: "a", element: <FooA /> },
    //             { path: "b", element: <FooB /> },
    //             { path: "*", element: <ErrorPage /> },
    //           ],
    //         },
    //         {
    //           path: "bar",
    //           element: <Bar />
    //         },
    //   ]
    // }
   
  ]);


 

  return (
    <div >
      <Suspense fallback={<Spin/>}>
      {routes}
        {/* <Routes>
          <Route path="/foo" element={<Foo />} >
            <Route path="a" element={<FooA />} />
            <Route path="b" element={<FooB />} />
            <Route path="*" element={<ErrorPage />} />
          </Route>
          <Route path="/bar" element={<Bar />} />
        </Routes> */}
        </Suspense>
    </div>
  )

}

export default App
